<template>
   <div class="left-list-main">
     <ul class="list">
       <li class="title">创新团队</li>
       <li class="item" @click="tapListItem(index)" :class="{active:index===state.currentIndex}" v-for="(item,index) in list" :key="index">
         {{ $TOOL.richTextWithUrlsRemove(item.title) }}
       </li>
     </ul>
   </div>
</template>

<script setup>
import {reactive} from 'vue'
import {homeApi} from "@/api";
import {useRoute} from "vue-router";

const state=reactive({
  currentIndex:0
})
const route=useRoute()
const list=ref([])
const emits=defineEmits(['change'])
onMounted(loadList)
async function loadList(){
  const res=await homeApi.getTeamList.get()
  list.value=res.map((v,i)=>{
    if(v.sorts!==0){
      v.sorts=i+1
    }
    return v
  }).sort((a,b)=>~~a.sorts-~~b.sorts)||[]
  if(route.query.teamId){
    state.currentIndex=list.value.findIndex(item=>item.id===route.query.teamId)
  }
  emits('change',list.value[state.currentIndex||0])
}

function tapListItem(index){
  if(index===state.currentIndex)return
  state.currentIndex=index
  emits('change',list.value[index])
}
</script>

<style scoped lang="scss">
.left-list-main{
  width: 200px;
  .list{
    background: #FFFFFF;
    padding: 0 10px;
    .title{
      padding: 15px 0 10px;
      font-size: 18px;
      font-weight: bold;
      color: $base-color;
      border-bottom: 1px solid #c4c7c7;
    }
    .item{
      cursor: pointer;
      padding: 10px 0;
      flex-direction: column;
      justify-content: center;
      border-bottom: 1px solid #f2f2f2;
      font-size: 16px;
      &.active{
        color: $base-color;
        transition: all 0.3s ease-in-out;
        transform: scale3d(1.01,1.02,1);
        font-weight: bold;
        &:before{
          content: '';
          display: inline-flex;
          width: 8px;
          margin-right: 5px;
          height: 8px;
          background: $base-color;
          clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
        }
      }
      &:hover{
        color: $base-color;
        transition: all 0.3s ease-in-out;
        transform: scale3d(1.01,1.02,1);
        font-weight: bold;
        &:before{
          content: '';
          display: inline-flex;
          width: 8px;
          margin-right: 5px;
          height: 8px;
          background: $base-color;
          clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
        }
      }
      &:last-child{
        border-bottom: 0px;
      }

    }
  }
}
</style>
